import React, { Component } from 'react';
// import PropTypes from "prop-types";
import { connect } from 'dva';
import { Table, Popconfirm, Button } from 'antd';
import Authorized, { checkAuthority } from 'utils/Authorized';
import AdminEditForm from 'components/permissionset/mgtresource/resourcemodal';

@connect(state => ({
  global: state.global,
  mgtresource: state.mgtresource,
}))
export default class Pages extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false, //是否展示新增Modal
      selectedRowKeys: [], // Check here to configure the default column
      loading: false,
      modalType: '',
      formDatas: null,
      currentId: '', //保存鼠标点击事件ID
      roleVisible: false, //是否展示新增Modal
      recordAllRole: null,
    };
  }
  componentDidMount() {
    this.getList({ pageNum: 1, pageSize: 10 });
    this.getDataTree();
  }

  /**
   * 数据获取
   */
  getList = payload => {
    this.props.dispatch({
      type: 'mgtresource/getList',
      payload,
    });
  };

  /**
   * 获取所属资源dataTree
   */
  getDataTree = payload => {
    this.props.dispatch({
      type: 'mgtresource/getTreeData',
      payload,
    });
  };

  //翻页按钮
  handlePageChange = (pageNum, pageSize) => {
    this.getList({ pageNum, pageSize });
  };

  // 处理列表单选框事件
  handleRowSelectChange = (selectedRowKeys, selectedRows) => {
    this.setState({ selectedRowKeys });
  };

  //批量删除
  handleBathDelete = () => {
    const { dispatch } = this.props;
    const { selectedRowKeys } = this.state;
    dispatch({
      type: 'mgtresource/delete',
      payload: { selectedRowKeys },
      callback: res => {
        if (res.code === 200) {
          this.setState({
            selectedRows: [],
            selectedRowKeys: [],
          });
        }
      },
    });
  };

  //关闭新增资源
  HandleCloseadminModal = () => {
    this.setState({
      visible: false,
    });
  };

  //打开新增资源
  HandleOpenadminModal = (type, datas) => {
    this.setState({
      visible: true,
      modalType: type,
      formDatas: datas || null,
    });
  };

  //资源回调 编辑新增
  addManage = values => {
    const { currentId, modalType } = this.state;
    const { dispatch } = this.props;
    if (modalType === 'edit') {
      dispatch({
        type: 'mgtresource/edit',
        payload: {
          id: currentId,
          values,
        },
      });
      this.HandleCloseadminModal('edit');
    } else {
      dispatch({
        type: 'mgtresource/add',
        payload: { values },
      });
      this.HandleCloseadminModal('add');
    }
  };

  // 编辑资源
  handleModalVisible = record => {
    // 打开编辑框
    this.setState({
      currentId: record.id,
      formDatas: record,
    });
    this.HandleOpenadminModal('edit', record);
  };

  render() {
    const {
      mgtresource: { page, loading, visibleDTM, treeData },
      global: { departOptions, diseOptions },
    } = this.props;
    const { visible, selectedRowKeys, modalType, formDatas } = this.state;

    const rowSelection = {
      selectedRowKeys,
      onChange: this.handleRowSelectChange,
      getCheckboxProps: record => ({
        disabled: record.disabled,
      }),
    };

    const pagiNation = {
      pageSize: page.pageSize,
      total: page.total,
      current: page.pageNum,
      onChange: this.handlePageChange,
    };

    //表格列定义
    const columns = [
      {
        title: '资源名',
        dataIndex: 'text',
        key: 'text',
      },
      {
        title: '资源类型',
        dataIndex: 'menuType',
        key: 'menuType',
        render: (text, record) => {
          return 'list' == record.menuType
            ? '列表'
            : 'element' == record.menuType
            ? '元素'
            : 'page' == record.menuType
            ? '菜单'
            : '未知';
        },
      },
      {
        title: '资源链接',
        dataIndex: 'url',
        key: 'url',
      },
      {
        title: '序号',
        dataIndex: 'sort',
        key: 'sort',
      },
      {
        title: '资源描述',
        dataIndex: 'description',
        key: 'description',
      },
      {
        title: '操作',
        render: record => (
          <div>
            <span>
              <Authorized
                authority={() => checkAuthority('securityResource:update')}
                noMatch={<div />}
              >
                <a onClick={() => this.handleModalVisible(record)}>编辑</a>
              </Authorized>
            </span>
          </div>
        ),
      },
    ];

    return (
      <>
        <AdminEditForm
          visible={visible}
          modalType={modalType}
          onCancel={this.HandleCloseadminModal}
          onOk={values => this.addManage(values)}
          record={formDatas}
          treeData={treeData}
        />
        <div>
          <h3 className="head">资源管理</h3>
          <div style={{ padding: ' 10px 20px' }}>
            <Authorized authority={() => checkAuthority('securityResource:add')} noMatch={<div />}>
              <Button
                type="primary"
                icon="plus"
                onClick={() => this.HandleOpenadminModal('add')}
                className="mr10"
              >
                新增
              </Button>
            </Authorized>

            <span>
              <Authorized
                authority={() => checkAuthority('securityResource:batchDelete')}
                noMatch={<div />}
              >
                {selectedRowKeys.length > 0 && (
                  <Popconfirm
                    title="删除的数据不能恢复，确定要全部删除吗?"
                    onConfirm={this.handleBathDelete}
                    okText="确定"
                    cancelText="取消"
                  >
                    <Button
                      className="ml10"
                      type="primary"
                      disabled={
                        null != selectedRowKeys && selectedRowKeys.length > 0 ? false : true
                      }
                      icon="delete"
                    >
                      {null != selectedRowKeys && selectedRowKeys.length > 1 ? '批量删除' : '删除'}
                    </Button>
                  </Popconfirm>
                )}
              </Authorized>
            </span>
            <Table
              style={{ marginTop: '10px' }}
              rowSelection={rowSelection}
              columns={columns}
              rowKey={record => record.id}
              loading={loading}
              dataSource={page.list}
              pagination={pagiNation}
            />
          </div>
        </div>
      </>
    );
  }
}
